<template>
	<div class="unity-body-div boxwatern " v-loading="loadingall" element-loading-background="rgba(0, 0, 0, 0.9)">
		<close @click.native="toClose"></close>
		<!-- <div class=""
			style="display:flex;align-items: flex-start;justify-content: space-between;padding-top: 15px;padding-left: 29px;padding-right: 37px;box-sizing: border-box;width: 100%;">
			<div class="unity-body-center-left-top">
				<div class="  color-gradient-blue_device"
					style="width: 8px;height: 15px;border-radius: 2px;margin-right: 10px;"></div>
				<div class="" style="font-size: 18px;z-index:999">放水洞倾斜</div>
			</div>
		</div> -->
		<big-center-title :title="pageTitle"></big-center-title>



		<div class="unity-body-center" style="padding: 0px  5vw;padding-top: 0px;position: relative;">
			<!-- <div class="change_date">
				<div :class="
			      index == datecheck ? 'choosedate' : 'change_date_item'
			    " v-bind:key="index" v-for="(item, index) in alldate" @click="changeDate(index)">
					{{ item }}
				</div>
			</div> -->
			<div class="chart" style="position: relative;">
				<div class="chartboder" v-show="yuan">
				</div>
				<div style="width:100%;height:470px;z-index:9;" ref='main1'>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Message
	} from "element-ui";
	import StringUtils from "../../utils/string"
	import UnityIm from "../../utils/unityIm"
	import bigCenterTitle from "@/components/unityweb/big-center-title";
	import close from "@/components/unityweb/close";
	import back from "@/components/unityweb/back";
	import axios from 'axios'

	export default {
		name: "deviceSmall",
		components: {
			'big-center-title': bigCenterTitle,
			close,
			back
		},
		data() {
			return {
				loadingall: false,
				myChart: '',
				alldata: '',
				dataLength: '',
				n: '',
				kill: '',
				datecheck: 0,
				alldate: ['周', '月', '年'],
				id: '',
				dataList: [

				],
				pageTitle: '放水洞倾斜',
				timeList: [],
				yuan:false
			};
		},
		created() {
			var _this = this
			// setTimeout(() => {

			// }, 200)


		},
		mounted() {
			window.addEventListener('message', (event) => {
				//event.data获取传过来的数据
				let _obj = event.data;
				let method_name = _obj.methodName || '';
				let paramsStr = _obj.parameterData || '';
				let params = StringUtils.toJson(paramsStr);
				if (_obj.managerType == 'open') {
					this.openHandler(method_name, params)
				} else if (_obj.managerType == 'close') {

				} else if (_obj.managerType == 'waterproofHole') {
					this.openHandler(method_name, params)
				}
			});
			if (window.vuplex) {
				this.addMessageListener23();
			} else {
				// 初始化侦听器
				window.addEventListener("vuplexready", this.addMessageListener23);
			}

		},
		beforeDestroy() {},
		methods: {
			addMessageListener23() {
				UnityIm.receiveUnityOpenMessage((method_name, params) => {
					this.openHandler(method_name, params)
				});
			},

			//时间转换
			timezh(item) {
				const date = item ? new Date(item) : new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				minute = minute < 10 ? ('0' + minute) : minute;
				var second = date.getSeconds();
				second = second < 10 ? ('0' + second) : second;
				return y + '-' + m + '-' + d
			},
			openHandler(method_name, params) {
				var _this = this
				switch (method_name) {
					case 'waterproofHole':
						_this.id = params.id

						// _this.$nextTick(()=>{
						_this.getfsgList()
						// })
						break
					case 'noanimation':
						break

					case 'start':
						break
					case 'close':
						break
				}

			},
			getfsgList() {
				var _this = this
				let datas = {
					type: 'month',
					id: _this.id
				}
				// switch (_this.datecheck) {
				// 	case 0:
				// 		datas.type = 'week'
				// 		break
				// 	case 1:
				// 		datas.type = 'month'
				// 		break
				// 	case 2:
				// 		datas.type = 'year'
				// 		break

				// }
				_this.$apis.mhsk_device_fsd_tilt(datas).then(res => {
					if (res.result == 0) {
						_this.dataList = res.data.y

						let timeList = JSON.parse(JSON.stringify(res.data.x))
						let alltime = []
						for (let i in timeList) {
							let it = {
								value: timeList[i],
								tooltip: {
									formatter: '{b}'
								},
							}
							alltime.push(it)
						}
						_this.timeList = alltime
						// console.log(alltime)
						// _this.dataList = [
						// 	[-10.0, 8.04],
						// 	[8.07, 6.95],
						// 	[-13.0, 7.58],
						// 	[9.05, -8.81],
						// 	[-11.0, -8.33],
						// 	[14.0, -7.66],
						// 	[13.4, -6.81],
						// 	[-10.0, 6.33],
						// 	[14.0, -10.96],
						// 	[-12.5, -6.82],
						// 	[-9.15, 7.2],
						// 	[11.5, 7.2],
						// 	[3.03, 4.23],
						// 	[12.2, -7.83],
						// 	[2.02, 4.47],
						// 	[-1.05, 3.33],
						// 	[4.05, 4.96],
						// 	[-6.03, -7.24],
						// 	[12.0, 6.26],
						// 	[-12.0, 8.84],
						// 	[7.08, 5.82],
						// 	[5.02, 5.68]
						// ]
						_this.$nextTick(() => {
							_this.chartDetial()
						})
					}
				})


			},
			chartDetial() {
				var _this = this
				_this.yuan = true
				_this.myChart = this.loadchart ? this.$echarts.init(_this.$refs.main1) : this.$echarts.init(_this.$refs
					.main1)
				let dd = _this.dataList
				let item = []
				let allx = []
				let ally = []
				for (let i in dd) {
					let tt = {
						series: [{
							symbolSize: 20,
							color: ["#ff0000"],
							type: 'scatter',
							name: i,
							data: [dd[i]]
						}]

					}
					allx.push(dd[i][0])
					ally.push(dd[i][1])
					item.push(tt)
				}
				// console.log(Math.ceil(Math.abs((Math.min(...ally)/5)))*90)
				console.log(item)
				let option = {
					baseOption: {
						timeline: {
							axisType: 'category',
							// realtime: false,
							// loop: false,
							autoPlay: true,
							// currentIndex: 2,
							playInterval: 1000,
							// controlStyle: {
							//     position: 'left'
							// },
							data: _this.timeList,
							bottom: 0,
							left: 10,
							right: 10,
							progress: {
								lineStyle: {
									color: "rgba(236, 21, 21, 1)",
									type: 'dashed',
									width: 10
								}
							},
							lineStyle: {
								show: true,
								color: '#fff',
								width: 4,
								borderColor: '#ccc'
							},
							label: {
								show: true,
								position: 'auto',
								color: '#fff'
							},
							itemStyle: {
								show: true,
								color: '#fff',
								borderColor: '#ccc'
							},
							controlStyle: {
								show: true,
								showPlayBtn: true,
								showPrevBtn: false,
								showNextBtn: false,
								color: '#fff',
								itemSize: 18,
								borderWidth: 2,
								borderColor: '#fff'
							},

						},
						grid: {
							x: 250,
							y: 10,
							x2: 250,
							y2: 90,
							// containLabel: true,
							// bottom: 10

						},
						xAxis: {
							nameTextStyle: {
								color: 'rgba(255, 255, 255, 1)',
							},
							name: 'x',
							nameTextStyle:{
								padding:[-30, 0, 0, -20]
							},
							max: 150,
							min: -150,
							position: 'center',
							axisTick: {
								show: true
							},
							axisLine: {
								lineStyle: {
									width: 2,
									color: "rgba(255, 255, 255, 1)"
								},
								symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
								symbolSize: [7, 10],
								symbolOffset: [0, 8]
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: ["#ababab"],
									width: 1,
									type: "solid"
								}
							},
							onZero: false,
							axisLabel: {
								margin: -170,
								formatter: function(value) { // 自定义刻度标签的格式化函数，你可以根据需要调整
									return value == 0 ? '' : value;
								}
							}
						},
						tooltip: {
							formatter: (params, ticket, callback) => '倾斜角度：' + params.value + '<br/>检测时间：' + _this
								.timeDetial(params.seriesName)
						},
						yAxis: {
							axisTick: {
								show: true
							},
							name: 'y',
							nameTextStyle:{
								padding:[ 0,-30, -20, 0]
							},
							onZero: true,
							axisLine: {
								lineStyle: {
									width: 2,
									color: "rgba(255, 255, 255, 1)"
								},
								symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
								symbolSize: [7, 10],
								symbolOffset: [0, 8]
							},
							max: 150,
							min: -150,
							splitLine: {
								show: false,
								lineStyle: {
									color: ["#ababab"],
									width: 1,
									type: "solid"
								}
							},
							axisLabel: {
								margin: -170,
								formatter: function(value) { // 自定义刻度标签的格式化函数，你可以根据需要调整
									return value == 0 ? '' : value;
								}


							}
						},

					},
					options: item


					// series: item
				};
				// _this.alldata = option.series
				// _this.dataLength = _this.alldata.length - 1
				// _this.n = 0
				// for (let i in option.series) {
				// 	option.series[i].symbolSize = 0
				// }
				// option.series[_this.n].symbolSize = 20
				// if (_this.n == _this.dataLength) {
				// 	_this.n = 0
				// } else {
				// 	_this.n++
				// }
				// option && _this.myChart.setOption(option);
				// _this.kill = setInterval(() => {
				// 	for (let i in option.series) {
				// 		option.series[i].symbolSize = 0
				// 	}
				// 	option.series[_this.n].symbolSize = 20
				// 	if (_this.n == _this.dataLength) {
				// 		_this.n = 0
				// 	} else {
				// 		_this.n++
				// 	}
				// 	option && _this.myChart.setOption(option);
				// }, 1000)
				// _this.myChart.on('mouseover', (e) => {
				// 	clearInterval(_this.kill)
				// 	_this.kill =null
				// 	option && _this.myChart.setOption(option);


				// });
				// _this.myChart.on('mouseout', (e) => {
				// 	_this.kill = setInterval(() => {
				// 		for (let i in option.series) {
				// 			option.series[i].symbolSize = 0
				// 		}
				// 		option.series[_this.n].symbolSize = 20
				// 		if (_this.n == _this.dataLength) {
				// 			_this.n = 0
				// 		} else {
				// 			_this.n++
				// 		}
				// 		option && _this.myChart.setOption(option);
				// 	}, 1000)


				// });
				_this.myChart.on('mouseover', (e) => {
					console.log(option)
					if (e.componentType == 'series') {
						option.baseOption.timeline.autoPlay = false
						option && _this.myChart.setOption(option);
					}

				});
				_this.myChart.on('click', (e) => {
					option.baseOption.timeline.autoPlay = false
					option && _this.myChart.setOption(option);
				});
				_this.myChart.on('mouseout', (e) => {
					if (e.componentType == 'series') {
						option.baseOption.timeline.autoPlay = true
						option && _this.myChart.setOption(option);
					}

				});


				option && _this.myChart.setOption(option);



			},
			timeDetial(item) {
				// console.log(item)
				let tt = this.timeList[item].value
				// console.log(tt)
				return tt
			},
			changeDate(index) {
				var _this = this
				this.datecheck = index;
				if (_this.myChart != '') {
					_this.dataList = []
					_this.myChart.off('mouseover')
					_this.myChart.off('mouseout')
					console.log(_this.myChart)
					clearInterval(_this.kill)
					_this.kill = null
					_this.myChart.clear()
				}

				_this.$nextTick(() => {
					_this.getfsgList()
				})
			},
			toClose() {
				UnityIm.closePanelManager('waterproofHole');
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import url('../../assets/css/unity.scss');
	@import url('https://dongping.jnaw.top/demo/index.css');


	.unity-body-div {
		padding: 0px;
		display: flex;
		flex-direction: column;

		/*background: rgba(5, 15, 26, 0.5) !important;*/
	}

	.boxwatern {
		color: #fff
	}


	.unity-body-center {
		margin-top: 0px;
		display: flex;
		width: 100%;
		box-sizing: border-box;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		// padding: 11px 6.8vw;
		// border: 1px solid rgba(255, 255, 255, 0.6);
		// overflow: hidden;
		// height: 100%;


	}

	.height_video {

		height: calc(100vh - 179px) !important;
		width: 82vw !important;
		;
	}

	.height_video_all {
		position: absolute !important;
		left: 0;
		top: 0;
		padding: 0;
		margin: 0;
		height: 100vh !important;
		width: 100vw !important;
		;
	}

	.unity-body-center-right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 4.6vw;
		position: relative;
		height: 35px;

	}

	.toleft {
		justify-content: flex-start;
	}

	.unity-body-center-left-top {
		// margin: 0 auto;
		display: flex;
		// flex-direction: column;
		align-items: center;

		font-size: 18px;
		font-family: siyuan_bold;
		font-weight: 500;
		color: #ffffff;
	}

	.color-gradient-blue_device {
		// /*主色调 */
		// background: #3083ff;
		// /*IE浏览器中由主色#007238，到#018944的颜色渐变设置*/
		// background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #3083ff), color-stop(1, #2dc1ff));
		// /*火狐浏览器中由主色#007238，到#018944的颜色渐变设置*/
		// background: -ms-linear-gradient(left, #3083ff, #2dc1ff);
		// /*谷歌浏览器中由主色#007238，到#018944的颜色渐变设置*/
		// background: -moz-linear-gradient(left bottom, #3083ff 0%, #2dc1ff 100%);
		// /*欧朋浏览器中由主色#007238，到#018944的颜色渐变设置*/
		// background: -o-linear-gradient(left, #3083ff, #2dc1ff);
		// /*filter:滤镜名（参数)*/
		// filter: progid:dximagetransform.microsoft.gradient(startColorStr='#3083ff', EndColorStr='#2dc1ff');
		// -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2dc1ff',EndColorStr='#3083ff')";
		background: linear-gradient(-77deg, #2dc1ff 0%, #3083ff 99%);
	}


	table {
		width: 100%;
		height: 100%;
		// border: 1px solid #000;
		// border: 1px dashed #000;
		border-collapse: collapse;


	}

	td {
		align-items: center;
		// text-align: center;
		padding-left: 10vw;
		font-size: 14px;
		color: #fff;
		width: 50%;
	}

	.td1 {
		border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
		border-right: 1px dashed rgba(255, 255, 255, 0.6);

	}

	.td2 {
		border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
		border-left: 1px dashed rgba(255, 255, 255, 0.6);

	}

	.unity_close {


		position: absolute;
		top: 25px;
		right: 25px;

		i {
			font-size: 40px;
			color: #fff;
		}
	}

	.operate {
		display: flex;
		align-items: center;
		font-size: 18px;
		color: #fff;
		z-index: 999999
	}

	.operate_picture {
		display: flex;
		align-items: center;

		i {
			font-size: 28px;
			margin-right: 1.1vw;

		}


	}

	.operate_gang {
		width: 1px;
		background-color: #fff;
		height: 26px;
		margin: 0 2.1vw;
	}

	.unity_close_two {
		color: #fff;
		z-index: 9999;

		i {
			position: relative;
			padding-right: 10px;
			font-size: 40px;
		}
	}

	.posi_title {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	}

	.chart {
		// margin-top: 40px;
		width: 100%;
		height: 470px;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
		// border: 1px solid #fff;
		// border-radius: 50%;
		// box-sizing: border-box;

	}

	.chartboder {
		position: absolute;
		width:384px;
		height: 384px;
		left: 50%;
		bottom:86px ;
		margin: 0px -190px;
		border: 1px solid #ccc;
		border-radius: 50%;

	}

	.chart2 {
		width: 460px;
		height: 460px;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// .change_date {
	// 	position: absolute;
	// 	right: 40px;
	// 	top: 9px;
	// 	display: flex;
	// 	z-index: 9999999999
	// }

	// .choosedate {
	// 	width: 60px;
	// 	height: 24px;
	// 	margin-right: 9px;
	// 	border-radius: 2px;
	// 	font-weight: 400;
	// 	color: #FFFFFF;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	background: linear-gradient(37deg, #2DC1FF 0%, #3083FF 99%);
	// }

	// .change_date_item {
	// 	width: 60px;
	// 	height: 24px;
	// 	margin-right: 9px;
	// 	border: 1px solid #0083FD;
	// 	border-radius: 2px;
	// 	font-weight: 400;
	// 	color: #FFFFFF;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// }

	.allbutton {
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.change_date {
		position: absolute;
		right: 40px;
		top: 9px;
		display: flex;
		z-index: 9999999999;
	}

	.choosedate {
		padding: 2px 5px;
		width: 70px;
		height: 24px;
		margin-right: 9px;
		border-radius: 2px;
		font-weight: 400;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(37deg, #2dc1ff 0%, #3083ff 99%);
		border: 1px solid #0083fd;
	}

	.change_date_item {
		padding: 2px 5px;
		width: 70px;
		height: 24px;
		margin-right: 9px;
		border: 1px solid #0083fd;
		border-radius: 2px;
		font-weight: 400;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
<style>
	.selseclass {
		/* max-height: 200px;
		overflow-y: auto; */
	}

	.selseclass .el-select-dropdown__item {
		height: 30px;
		line-height: 30px;
	}

	.selseclass::-webkit-scrollbar {
		width: 0px;
		height: 0px;
	}

	.el-loading-text {
		color: #fff !important;
		font-size: 18px !important;
	}

	.circular {
		display: none !important;
	}

	.el-select-dropdown {
		background-color: rgba(0, 0, 0, 0.6) !important;
		border: 1px solid #BFBFBF;
	}

	.el-select-dropdown__item {
		color: #FFFFFF !important;

	}

	.el-select-dropdown__item.hover {
		background-color: rgba(255, 255, 255, 0.3) !important;
	}

	.rain .el-form--inline .el-form-item__label {
		color: #FFFFFF !important;
	}

	.rain .el-form--inline .el-input__inner {
		height: 35px !important;
		/* width:140px !important ; */
		background-color: transparent;
		border-color: #FFFFFF;
		color: #FFFFFF;
	}

	.rain .el-input.is-disabled .el-input__inner {
		background-color: rgba(0, 0, 0, 0.3) !important;
		height: 35px !important;

	}

	.rain .el-form-item__content {
		line-height: 0px !important;
	}
</style>
